<template>
  <div class="container">
    <div class="top-container">
      <el-form :model="queryForm" class="query-form" inline>
        <el-form-item label="出餐中心">
          <meal-center-selector v-model="queryForm.mealCenterId" placeholder="请选择出餐中心"/>
        </el-form-item>
        <el-form-item label="类型">
          <meal-type-selector v-model="queryForm.mealType" placeholder="请选择类型"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQueryClick">查询</el-button>
          <el-button type="primary" @click="handleAddClick">添加套餐</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table v-loading="isLoading" :data="meals" border>
      <el-table-column label="ID" prop="id"/>
      <el-table-column label="餐品序号" prop="seq"/>
      <el-table-column label="名称" prop="name"/>
      <el-table-column label="配菜" prop="mealdesc"/>
      <el-table-column label="出餐中心" prop="shopname"/>
      <el-table-column label="类型" prop="mealtype"/>
      <el-table-column label="图片" prop="picture">
        <template #default="{row}">
          <el-image :preview-src-list="[row.picture]" :src="row.picture" hide-on-click-modal preview-teleported/>
        </template>
      </el-table-column>
      <el-table-column label="价格" prop="price"/>
      <el-table-column label="口味" prop="taste"/>
      <el-table-column label="库存" prop="stock"/>
      <!-- <el-table-column label="折扣">
        <template #default="{row}">
          <span>{{ row.discount }}</span>
          <span>折</span>
        </template>
      </el-table-column> -->
      <el-table-column label="状态">
        <template #default="{row}">
          {{ translateStatus(row.status) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button v-if="row.status !== 1" link type="primary" @click="handleLaunchClick(row.id)">上架</el-button>
          <el-button v-if="row.status !== 2" link type="primary" @click="handleRemoveClick(row.id)">下架</el-button>
          <el-button :icon="Edit" link type="primary" @click="handleEditClick(row.id)">修改</el-button>
          <el-popconfirm title="是否确定删除？" @confirm="handleDeleteConfirm(row.id)">
            <template #reference>
              <el-button :icon="Delete" link type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <meal-dialog v-model="isAddDialogShow" @success="handleDialogSuccess"/>
    <meal-dialog :id="idToEdit" v-model="isEditDialogShow" @success="handleDialogSuccess"/>
  </div>
</template>
<script lang="ts" setup>
import {ref} from "vue"
import {MealRequest, MealResponse, MealType, translateStatus} from "@/api/types/meal";
import MealCenterSelector from "@/components/selector/MealCenterSelector.vue";
import MealTypeSelector from "@/components/selector/MealTypeSelector.vue";
import {deleteMealById, getMealById, getMealsByMealCenterIdAndMealType, updateMeal} from "@/api/meal";
import {ElMessage} from "element-plus";
import {Delete, Edit} from "@element-plus/icons-vue"
import MealDialog from "@/components/dialog/MealDialog.vue";

const isAddDialogShow = ref(false)
const isEditDialogShow = ref(false)
const queryForm = ref<{ mealCenterId?: number, mealType?: MealType }>({
  mealCenterId: undefined,
  mealType: undefined,
})
const meals = ref<MealResponse[]>([])
const idToEdit = ref<number | undefined>()
const isLoading = ref(false)

async function getData() {
  if (queryForm.value.mealCenterId !== undefined && queryForm.value.mealType !== undefined) {
    if (isLoading.value == false) {
      isLoading.value = true
    }
    const {result} = await getMealsByMealCenterIdAndMealType(queryForm.value.mealCenterId, queryForm.value.mealType)
    if (result !== undefined) {
      meals.value = result
      isLoading.value = false
    }
  }
}

async function handleQueryClick() {
  await getData()
}

function handleAddClick() {
  isAddDialogShow.value = true
}

function handleEditClick(id: number) {
  idToEdit.value = id
  isEditDialogShow.value = true
}

// 上架套餐
async function handleLaunchClick(id: number) {
  const {result} = await getMealById(id)
  if (result !== undefined) {
    const mealRequest: MealRequest = {
      id: result[0].id,
      name: result[0].name,
      price: result[0].price,
      taste: result[0].taste,
      picture: result[0].picture,
      mealdesc: result[0].mealdesc,
      shopid: Number(result[0].shopid),
      // discount: result[0].discount,
      status: 1,
      stock: result[0].stock,
    }
    const {code} = await updateMeal(mealRequest)
    if (code === "200") {
      ElMessage.success("上架成功")
      await getData()
    }
  }
}

// 下架套餐
async function handleRemoveClick(id: number) {
  const {result} = await getMealById(id)
  if (result !== undefined) {
    const mealRequest: MealRequest = {
      id: result[0].id,
      name: result[0].name,
      price: result[0].price,
      taste: result[0].taste,
      picture: result[0].picture,
      mealdesc: result[0].mealdesc,
      shopid: Number(result[0].shopid),
      // discount: result[0].discount,
      status: 2,
      stock: result[0].stock,
    }
    const {code} = await updateMeal(mealRequest)
    if (code === "200") {
      ElMessage.success("下架成功")
      await getData()
    }
  }
}

async function handleDeleteConfirm(id: number) {
  try {
    const {result} = await deleteMealById(id)
    if (result !== undefined) {
      if (result) {
        ElMessage.success('删除成功');
        await getData()
      } else {
        ElMessage.error('删除失败');
      }
    }
  } catch (error) {
    ElMessage.error('删除失败');
  }
}

async function handleDialogSuccess(mealCenterId: number, mealType: MealType) {
  queryForm.value.mealCenterId = mealCenterId
  queryForm.value.mealType = mealType
  await getData()
}
</script>
<style lang="scss" scoped>
.container {
  padding: 20px;
  background-color: white;

  .top-container {
    .query-form {
      .el-select {
        --el-select-width: 240px;
      }
    }
  }
}
</style>
